<script setup>
import { ref } from 'vue'
import { Panel, VueFlow } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    position: { x: 50, y: 50 },
    data: {
      label: 'Node 1',
      hello: 'world',
    }
  },
])

function onSomeEvent(nodeId) {
  const node = nodes.value.find((node) => node.id === nodeId)
  console.log('----------> node：',node)
  node.data = {
    ...nodes.value[0].data,
    label: 'Node 2',
    hello: 'world',
  }

  // you can also mutate properties like `selectable` or `draggable`
  node.selectable = false
  node.draggable = false
}
</script>

<template>
  <!--完全复制官网上的demo，但是直接修改nodes并没有更新视图！！！-->
  <div style="height: calc(100vh - 60px);">
    <VueFlow :nodes="nodes">
      <Panel>
        <button type="button" @click="onSomeEvent('1')">Update Node 1</button>
      </Panel>
    </VueFlow>
  </div>

</template>
